<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
	<title>疫情管理系统</title>
	<link rel="stylesheet" href="./res/layui/css/layui.css">
	<link rel="stylesheet" href="./res/static/css/index.css">
	<link rel="icon" href="./images/favicon.ico">

	<!-- <script src="./highCharts/art-template.js"></script>
		<script src="./api/config.js"></script>
		<script src="./highCharts/jquery-3.2.1.js"></script> -->
</head>
<style>
	.nav .layui-nav .layui-nav-item {
		display: inline-block;
		margin: 0 49px;
		line-height: 80px;
	}
</style>

<body style="background-image: url('../res/static/img/bg.jpg')">

	<!-- nav部分 -->
	<div class="nav index">
		<div class="nav-logo">
			<a href="./status.html">
				<img src="./res/static/img/logo.png" width="65" style="margin-left: 20px;">
			</a>
		</div>

		<div class="layui-container">
			<div class="nav-list">
				<button>
					<span></span><span></span><span></span>
				</button>
				<ul class="layui-nav" lay-filter="" style="margin: 0 -15px;">
					<li class="layui-nav-item"><a href="status.html">疫情现状</a></li>
					<li class="layui-nav-item"><a href="nat.html">核酸检测</a></li>
					<li class="layui-nav-item"><a href="news.html">疫情新闻</a></li>
					<li class="layui-nav-item"><a href="virus.html">专题展示</a></li>
					<li class="layui-nav-item"><a href="way.html">出行速查</a></li>
					<li class="layui-nav-item layui-this"><a href="resident.html">居民上报</a></li>
					<li class="layui-nav-item"><a href="hospital.html">医院速查</a></li>
				</ul>
			</div>
		</div>
	</div>

	<!-- main -->
	<div class="main-news">
		<div class="layui-container">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>个人自行上报疑似/确诊信息</legend>
			</fieldset>
			<div class="layui-form layuimini-form">
				<div class="layui-form-item">
					<label class="layui-form-label required">姓名</label>
					<div class="layui-input-block">
						<input type="text" name="resident_name" lay-verify="required" lay-reqtext="姓名不能为空"
							placeholder="请输入姓名" value="" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label required">性别</label>
					<div class="layui-input-block">
						<input type="radio" name="resident_gender" value="男" title="男" checked="">
						<input type="radio" name="resident_gender" value="女" title="女">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label required">手机号</label>
					<div class="layui-input-block">
						<input type="text" name="resident_phone" lay-verify="required" lay-reqtext="手机号不能为空"
							placeholder="请输入手机号" value="" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label required">身份证号</label>
					<div class="layui-input-block">
						<input type="text" name="resident_idcard" lay-verify="required" lay-reqtext="身份证号不能为空"
							placeholder="请输入身份证号" value="" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">居民状态</label>
					<div class="layui-input-block">
						<select name="status_status" id="select-vaccine">
							<option></option>
							<option>健康</option>
							<option>确诊</option>
							<option>疑似</option>
							<option>无症状</option>
							<option>死亡</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label required">生日</label>
					<div class="layui-input-block">
						<input type="date" name="resident_birthday" lay-verify="required" lay-reqtext="生日不能为空"
							placeholder="请输入生日" value="2000-01-01" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label required">年龄</label>
					<div class="layui-input-block">
						<input type="text" name="resident_age" placeholder="请输入年龄" value="" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label required">地址</label>
					<div class="layui-input-block">
						<input type="text" name="resident_address" lay-verify="required" lay-reqtext="地址不能为空"
							placeholder="请输入地址" value="" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">照片</label>

					<div class="layui-input-block">

						<div class="layui-upload">
							<button type="button" class="layui-btn" id="test1">上传图片</button>
							<input type="hidden" name="resident_picture" id="pic">
							<div class="layui-upload-list">
								<img style="width: 100px;" class="layui-upload-img" id="demo1">
								<p id="demoText"></p>
							</div>
							<div style="width: 95px;">
								<div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
									<div class="layui-progress-bar" lay-percent=""></div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="./lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
	layui.use(['form', 'upload', 'element'], function () {
		var form = layui.form,
			layer = layui.layer,
			upload = layui.upload,
			element = layui.element,
			laydate = layui.laydate
		$ = layui.$;
		laydate.render({
			elem: '#date'
		});

		//常规使用 - 普通图片上传
		var uploadInst = upload.render({
			elem: '#test1'
			, url: 'http://localhost:8080/admin/person/resident/uploadPicture' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
			, before: function (obj) {
				//预读本地文件示例，不支持ie8
				obj.preview(function (index, file, result) {
					$('#demo1').attr('src', result); //图片链接（base64）
				});

				element.progress('demo', '0%'); //进度条复位
				layer.msg('上传中', { icon: 16, time: 0 });
			}
			, done: function (res) {
				if (res.code == 200) {
					$("#demo1").attr("src", res.data.url);
					$("#pic").val(res.data.url);  // 把上传之后的图片地址 存到隐藏域  表单提交的时候 传到后台
					console.log("aaaa = " + $("#pic").val());
				}
				//如果上传失败
				if (res.code == 500) {
					return layer.msg('上传失败');
				}
				//上传成功的一些操作
				//……
				$('#demoText').html(''); //置空上传失败的状态
			}
			, error: function () {
				//演示失败状态，并实现重传
				var demoText = $('#demoText');
				demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				demoText.find('.demo-reload').on('click', function () {
					uploadInst.upload();
				});
			}
			//进度条
			, progress: function (n, elem, e) {
				element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
				if (n == 100) {
					layer.msg('上传完毕', { icon: 1 });
				}
			}
		});


		//监听提交
		form.on('submit(saveBtn)', function (data) {
			var index = layer.alert(JSON.stringify(data.field), {
				title: '最终的提交信息'
			}, function () {
				// 关闭弹出层
				layer.close(index);
				var iframeIndex = parent.layer.getFrameIndex(window.name);
				parent.layer.close(iframeIndex);
			});

			$.ajax({
				url: "http://localhost:8080//admin/person/resident/addResident",
				data: data.field,
				type: 'post',
				success: function (data) {
					if (data.code == 200) {
						parent.layer.msg("添加成功")

					}
				},
				error: function (data) {
					console.log("bbb = " + data)
					layer.alert("添加失败!")
				}
			});
			return false;
		});

	});
</script>

</html>